<template>
  <div class="screen-map">
    <numList></numList>
    <div class="centerMap">1</div>
    <div class="chart-lines">
      <cardTitle text="运力分析"/>
      <div class="chart-box"></div>
      <div class="text-row-box">
        <div class="text-row">
          <div class="img1">司机</div>
          <div class="right-text">
            <div class="text1">
              <span class="label">今日活跃：</span>
              <span class="value blue">80000人</span>
            </div>
            <div class="text2">
              <span class="label">利用率：</span>
              <span class="value blue">99%</span>
            </div>
          </div>
        </div>
        <div class="text-row">
          <div class="img2">车辆</div>
          <div class="right-text">
            <div class="text1">
              <span class="label">今日活跃：</span>
              <span class="value yellow">8辆</span>
            </div>
            <div class="text2">
              <span class="label">利用率：</span>
              <span class="value yellow">12%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import numList from "./numList.vue";
import cardTitle from '../cardTitle.vue'
import * as echarts from "echarts"
import {centerLines, mapOption} from '../../chartOptions'
import chinaJson from '../../map/china.json'
export default {
  name: "screenMap",
  props: {},
  components: {
    numList,
    cardTitle
  },
  data () {
    return {
      chinaJson
    };
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
    this.initLines()
    this.initMap()
  },
  methods: {
    //运力分析
    initLines () {
      let dom = document.querySelector(".chart-box");
      let chart = echarts.init(dom);
      chart.setOption(centerLines())
      window.addEventListener('resize', function () {
        chart.resize()
      })
    },
    initMap(){
      let dom = document.querySelector(".centerMap");
      let chart = echarts.init(dom);
      echarts.registerMap('china', this.chinaJson)
      chart.setOption(mapOption())
      window.addEventListener('resize', function () {
        chart.resize()
      })
    },
  },

};
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";

.screen-map {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .centerMap {
    flex: 1;
    padding: 0 px-to-rem(17px) 0 px-to-rem(17px);
    font-size: px-to-rem(16px);
    color: #fff;
    background: url("../../images/map-image.png") no-repeat;
    background-size: 78% 85%;
    background-position-x: 40%;
    background-position-y: 50%;
  }

  .chart-lines {
    font-size: px-to-rem(16px);
    color: #fff;
    width: px-to-rem(334px);
    height: px-to-rem(296px);
    position: absolute;
    left: px-to-rem(17px);
    bottom: 0;
    background: url("../../images/chart-lines.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: px-to-rem(5px) px-to-rem(5px);
    display: flex;
    flex-direction: column;

    .chart-box {
      flex: 1;
    }

    .text-row-box {
      display: flex;
      flex-direction: column;
      gap: px-to-rem(8px);
      padding: 0 px-to-rem(17px) px-to-rem(10px) px-to-rem(17px);
    }

    .text-row {
      display: flex;
      line-height: px-to-rem(24px);

      .img1 {
        width: px-to-rem(61px);
        height: px-to-rem(24px);

        text-align: center;
        background: url("../../images/driver-bg.png") no-repeat;
        background-size: 100% 100%;
      }

      .img2 {
        width: px-to-rem(61px);
        height: px-to-rem(24px);
        text-align: center;
        background: url("../../images/car-bg.png") no-repeat;
        background-size: 100% 100%;
      }

      .blue {
        color: #00b6ff;

      }

      .yellow {
        color: #ffe038;
      }

      .right-text {
        flex: 1;
        display: flex;
        justify-content: center;
        padding-left: px-to-rem(5px);
      }

      .text1 {
        width: 65%;
        display: flex;

        .label {
          width: px-to-rem(65px);
          font-size: px-to-rem(13px);
          color: #ffffff;
        }

        .value {
          font-size: px-to-rem(13px);
        }
      }

      .text2 {
        flex: 1;
        display: flex;

        .label {
          width: px-to-rem(52px);
          font-size: px-to-rem(13px);
          color: #ffffff;
        }

        .value {
          font-size: px-to-rem(13px);
        }
      }
    }
  }
}
</style>
